<template>
  <div>
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">个人信息</h1>
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="saveEdit">保存</button>
    </header>

    <div id="my-data-body">
      <div class="mydata-header mui-table-view">
        <a class="mui-navigate-right" @click="eventUploadImg">
          <input type="file" id="upload-input" @change="uploadImg" />
          <img class="mui-pull-left" v-bind:src="user_header" />
        </a>
      </div>
    </div>

    <div class="mydata-edit">
      <div class="mui-input-row">
        <label>个人昵称:</label>
        <input type="text" v-model="user_name" placeholder="请输入昵称" />
      </div>
      <div class="mui-input-row">
        <label>手机号码:</label>
        <input type="text" v-model="user_phone" placeholder="请输入手机号码" />
      </div>
      <div class="mui-input-row">
        <label>电子邮箱:</label>
        <input type="text" v-model="user_email" placeholder="请输入电子邮箱" />
      </div>
      <div class="mui-input-row birthday-panel">
        <label>生日:</label>
        <div class="birthday-input-panel">
          <input type="text" v-model="user_birthday_y" placeholder="年" />
          <span>年</span>
          <input type="text" v-model="user_birthday_m" placeholder="月" />
          <span>月</span>
          <input type="text" v-model="user_birthday_d" placeholder="日" />
          <span>日</span>
        </div>
      </div>
      <div class="mui-input-row">
        <label>性别:</label>
        <div class="sex-panel mui-radio">
          <input type="radio" name="sex" value="1" v-model="user_sex" />
          <span>男</span>
          <input type="radio" name="sex" value="2" v-model="user_sex" />
          <span>女</span>
        </div>
      </div>

      <div class="mui-input-row">
        <label>个性签名:</label>
        <textarea id="user_info-text" cols="30" rows="10" v-model="user_info"></textarea>
    
      </div>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import { initLogin, layout } from "../assets/js/intercept";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";

export default {
  data() {
    return {
      user_header: "",
      user_name: "",
      user_phone: "",
      user_email: "",
      user_birthday_y: "",
      user_birthday_m: "",
      user_birthday_d: "",
      user_info: "",
      user_sex: "",
      user_id: ""
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    eventUploadImg: function() {
      var btnUpload = document.querySelector("#upload-input").click();
    },
    uploadImg: function() {
      var file = document.getElementById("upload-input").files[0],formData =new FormData();
        formData.append("image",file);
        
      axios({
          url : api.util.uploadImg,
          method : 'post',
          data : formData,
          
      }).then((res) => {
          var res = res.data;
          if(res.code){
              this.user_header = res.data.imgUrl;
              Toast(res.msg);
          }
      });
    },
    saveEdit: function() {
      var sex =
        this.user_birthday_y +
        "-" +
        this.user_birthday_m +
        "-" +
        this.user_birthday_d;
      var updateData = {
        user_id: this.user_id,
        user_header: this.user_header,
        user_name: this.user_name,
        user_phone: this.user_phone,
        user_email: this.user_email,
        user_birthday: sex,
        user_info: this.user_info,
        user_sex: this.user_sex
      };
      axios({
        url: api.user.edit,
        method: "post",
        data: updateData
      }).then(res => {
        var res = res.data;
        if (res.code) {
          Toast(res.msg);
          localStorage.removeItem("Now_User");
          localStorage.setItem("Now_User",  JSON.stringify(res.data));
          return true;
        }
        Toast(res.msg);
      });
    }
  },
  created() {
    var user = localStorage.getItem("Now_User");// Cookies.get("Now_User");
    user = JSON.parse(user);
    this.user_id = user.user_id;
    this.user_header = user.user_header;
    this.user_name = user.user_name;
    this.user_email = user.user_email;
    this.user_phone = user.user_phone;
    this.user_info = user.user_info;
    var birthday = user.user_birthday;
    this.user_sex = user.user_sex;
    birthday = birthday.split("-");
    this.user_birthday_y = birthday[0];
    this.user_birthday_m = birthday[1];
    this.user_birthday_d = birthday[2];
  }
};



</script>
<style>
@import "../assets/css/mydata.css";
</style>

